<template>
  <div class="content-wrap">
    <header>百信监管合规态势监控平台</header>
    <!-- 主内容区域 -->
    <div class="content-main">
      <canvas class="rain"></canvas>
      <!-- 时间组件 -->
      <my-time class="time"></my-time>

      <section class="con">
        <div class="left">
          <div class="left-one">
            <div class="after" style="padding: 0.0625rem 0">
              <my-chart :my-option="chart1Data" style="width: 100%; height: 100%" />
            </div>
          </div>
          <div class="left-two">
            <div class="after">
              <div class="title-global">
                <div class="title-img active">各业务系统数据分级分布</div>
              </div>
              <my-chart :my-option="chart2Data" style="width: 100%; height: 80%" />
            </div>
          </div>
        </div>
        <div class="center">
          <my-center />
        </div>
        <div class="right">
          <div class="right-one">
            <div class="after">
              <div class="title-global">
                <div class="title-img active">风险合规业务TOP5</div>
              </div>
              <!-- 子组件 Start -->
              <right-table :tableData="data" :tableHeader="dataHeader"></right-table>
            </div>
          </div>
          <div class="right-two">
            <div class="after">
              <div class="title-global">
                <div class="title-img active">合规隐患业务TOP5</div>
              </div>
              <!-- 子组件 Start -->
              <right-table :tableData="data2" :tableHeader="dataHeader2"></right-table>
            </div>
          </div>
        </div>
      </section>

      <footer>
        <div class="footer-left">
          <div class="after">
            <div class="title-global">
              <div class="title-img current" style="margin: auto">重要合规风险事件列表</div>
            </div>
            <my-ScrollTable></my-ScrollTable>
          </div>
        </div>
        <div class="footer-right">
          <div class="after">
            <div class="title-global">
              <div class="title-img last-width">数据合规态势</div>
            </div>
            <my-situation />
          </div>
        </div>
      </footer>
    </div>
  </div>
</template>
<script setup>
// 监听屏幕变化如果在500毫秒内没有变化则刷新页面
let resizeTimer = null;
window.onresize = () => {
  if (resizeTimer) {
    clearTimeout(resizeTimer);
    resizeTimer = null;
  }
  resizeTimer = setTimeout(() => {
    location.reload();
  }, 500);
};
import * as echarts from "echarts";
import myChart from "@/components/MyEcharts/index.vue";
import ScrollTable from "@/components/scrollTable/index.vue";
import myTime from "@/components/myTime/index.vue";
import mySituation from "@/components/MySituation/index.vue";
import RightTable from "@/components/RightTable/index.vue";
import myScrollTable from "@/components/scrollTable/index.vue";
import mydatabase from "@/components/Mydatabase/index.vue";
import LeftChart from "@/components/LeftChart/leftChart.vue";
// import MyLight from "@/components/MyLight/index.vue";

onMounted(() => {
  rainBg();
});
// 流星雨背景
const rainBg = () => {
  //设置canvas宽、高
  var c = document.querySelector(".rain");
  var ctx = c.getContext("2d"); //获取canvas上下文
  var w = (c.width = document.querySelector(".content-main").clientWidth);
  var h = (c.height = document.querySelector(".content-main").clientHeight);
  function random(min, max) {
    return Math.random() * (max - min) + min;
  }

  function RainDrop() {}
  //雨滴对象 这是绘制雨滴动画的关键
  RainDrop.prototype = {
    init: function () {
      this.x = random(0, w); //雨滴的位置x
      this.y = h; //雨滴的位置y
      this.color = "hsl(180, 100%, 50%)"; //雨滴颜色 长方形的填充色
      this.vy = random(4, 5); //雨滴下落速度
      this.hit = 0; //下落的最大值
      this.size = 2; //长方形宽度
    },
    draw: function () {
      if (this.y > this.hit) {
        var linearGradient = ctx.createLinearGradient(
          this.x,
          this.y,
          this.x,
          this.y + this.size * 30
        );
        // 设置起始颜色
        linearGradient.addColorStop(0, "#f9ab24");
        // 设置终止颜色
        linearGradient.addColorStop(1, "#fff");
        // 设置填充样式
        ctx.fillStyle = linearGradient;
        ctx.fillRect(this.x, this.y, this.size, this.size * 50); //绘制长方形，通过多次叠加长方形，形成雨滴下落效果
      }
      this.update(); //更新位置
    },
    update: function () {
      if (this.y > this.hit) {
        this.y -= this.vy; //未达到底部，增加雨滴y坐标
      } else {
        this.init();
      }
    },
  };

  function resize() {
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
  }

  //初始化一个雨滴

  var rs = [];
  for (var i = 0; i < 10; i++) {
    setTimeout(function () {
      var r = new RainDrop();
      r.init();
      rs.push(r);
    }, i * 300);
  }

  function anim() {
    ctx.clearRect(0, 0, w, h); //填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致不能产生叠加的效果
    for (var i = 0; i < rs.length; i++) {
      rs[i].draw(); //绘制雨滴
    }
    requestAnimationFrame(anim); //控制动画帧
  }

  window.addEventListener("resize", resize);
  //启动动画
  anim();
};

let state = reactive({
  data: [
    {
      title: "人工智能中台",
      ruleType: "3",
      regular: "60%",
    },
    {
      title: "海纳Data++",
      ruleType: "1",
      regular: "20%",
    },
    {
      title: "小微业务系统",
      ruleType: "2",
      regular: "40%",
    },
    {
      title: "风控平台",
      ruleType: "1",
      regular: "20%",
    },
    {
      title: "消金业务系统",
      ruleType: "2",
      regular: "40%",
    },
  ],
  dataHeader: [
    {
      prop: "title",
      label: "业务系统名称",
      overHidden: true, // 超出显示省略号 比如某一行字数多，缩小屏幕就省略号显示
    },
    {
      prop: "ruleType",
      label: "合规风险数量",
    },
    {
      prop: "regular",
      label: "风险处置稽核",
    },
  ],
  data2: [
    {
      title: "小微业务系统",
      ruleType: "2",
      regular: "20%",
    },
    {
      title: "风控平台",
      ruleType: "3",
      regular: "30%",
    },
    {
      title: "海纳Data++",
      ruleType: "1",
      regular: "10%",
    },
    {
      title: "消金业务系统",
      ruleType: "3",
      regular: "30%",
    },
    {
      title: "人工智能中台",
      ruleType: "2",
      regular: "20%",
    },
  ],
  dataHeader2: [
    {
      prop: "title",
      label: "业务系统名称",
      overHidden: true, // 超出显示省略号 比如某一行字数多，缩小屏幕就省略号显示
    },
    {
      prop: "ruleType",
      label: "合规隐患数量",
    },
    {
      prop: "regular",
      label: "隐患处置稽核",
    },
  ],
  chart1Data: {
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" },
    },
    grid: {
      top: "30%",
      right: "15%",
      bottom: "20",
      left: "9%",
    },
    legend: {
      data: [
        "合规风险",
        "合规隐患",
        "微业务风险",
        "合规风险占比",
        "合规隐患占比",
        "微业务风险占比",
      ],
      right: "center",
      width: "100%",
      textStyle: {
        color: "#fff",
      },
      itemWidth: 12,
      itemHeight: 10,
      width: 420,
      itemGap: 12,
    },

    xAxis: [
      {
        type: "category",
        data: ["2019", "2020", "2021", "2022"],
        axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
        axisLabel: {
          color: "rgba(255,255,255,.7)",
          fontSize: "14",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位/个",
        nameTextStyle: {
          fontSize: "12",
          color: "#fff",
          padding: [0, 0, -2, -30],
        },
        axisTick: { show: false },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          fontSize: 14,
          color: "rgba(255,255,255,.6)",
        },
        axisLine: {
          min: 0,
          max: 10,
          lineStyle: { color: "rgba(255,255,255,.1)" },
        }, //左线色
      },
      {
        type: "value",
        name: "单位/%",
        nameTextStyle: {
          fontSize: "12",
          color: "#fff",
          padding: [0, -50, -2, 0],
        },
        show: true,
        axisLabel: {
          show: true,
          fontSize: 14,
          formatter: "{value} %",
          color: "rgba(255,255,255,.6)",
        },
        axisTick: { show: false },
        axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }, //右线色
        splitLine: { show: true, lineStyle: { color: "rgba(255,255,255,.1)" } }, //x轴线
      },
    ],
    series: [
      {
        name: "合规风险",
        type: "bar",
        data: [36.6, 38.8, 40.84, 41.6],
        barWidth: "15%",
        itemStyle: {
          borderRadius: 15,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#8bd46e",
            },
            {
              offset: 1,
              color: "#09bcb7",
            },
          ]),
        },
        barGap: "0.2",
      },
      {
        name: "合规隐患",
        type: "bar",
        data: [14.8, 14.1, 15, 16.3],
        barWidth: "15%",
        itemStyle: {
          borderRadius: 15,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#248ff7",
            },
            {
              offset: 1,
              color: "#6851f1",
            },
          ]),
        },
        barGap: "0.2",
      },
      {
        name: "微业务风险",
        type: "bar",
        data: [9.2, 9.1, 9.85, 8.9],
        barWidth: "15%",
        itemStyle: {
          borderRadius: 15,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#fccb05",
            },
            {
              offset: 1,
              color: "#f5804d",
            },
          ]),
        },
        barGap: "0.2",
      },
      {
        name: "合规风险占比",
        type: "line",
        smooth: true,
        yAxisIndex: 1,
        data: [0, 6.01, 5.26, 1.48],
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          color: "#86d370",
        },
      },
      {
        name: "合规隐患占比",
        type: "line",
        yAxisIndex: 1,
        data: [0, -4.73, 6.38, 8.67],
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          color: "#3496f8",
        },
        smooth: true,
      },
      {
        name: "微业务风险占比",
        type: "line",
        yAxisIndex: 1,

        data: [0, -1.09, 8.24, -9.64],
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          color: "#fbc30d",
        },
        smooth: true,
      },
    ],
  },
  chart2Data: {
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" },
    },
    grid: {
      top: "18%",
      right: "15%",
      bottom: "10%",
      left: "19%",
    },
    legend: {
      data: ["合规风险", "合规隐患"],
      right: "center",
      top: "5px",
      textStyle: {
        color: "#fff",
      },
      itemWidth: 12,
      itemHeight: 10,
      itemGap: 20,
    },
    xAxis: [
      {
        type: "category",

        data: ["2019", "2020", "2021", "2022"],
        axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
        axisLabel: {
          color: "rgba(255,255,255,.7)",
          fontSize: "14",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位/个",
        nameTextStyle: {
          fontSize: "12",
          color: "#fff",
          padding: [0, 0, -5, -30],
        },
        splitLine: { show: false },
        axisTick: { show: false },
        axisLabel: {
          show: true,
          color: "rgba(255,255,255,.6)",
        },
        axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }, //左线色
      },
      {
        type: "value",
        name: "单位/%",
        nameTextStyle: {
          fontSize: "12",
          color: "#fff",
          padding: [0, -50, -5, 0],
        },
        show: true,
        axisTick: { show: false },
        axisLabel: {
          show: true,
          formatter: "{value} %",
          color: "rgba(255,255,255,.6)",
        },
        axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }, //右线色
        splitLine: { show: true, lineStyle: { color: "rgba(255,255,255,.1)" } }, //x轴线
      },
    ],
    series: [
      {
        name: "合规风险",
        type: "bar",
        data: [1845.35, 2057.22, 2427.22, 3050.0],
        barWidth: "20%",
        itemStyle: {
          borderRadius: 15,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#fccb05",
            },
            {
              offset: 1,
              color: "#f5804d",
            },
          ]),
        },
        barGap: "0",
      },
      {
        name: "合规隐患",
        type: "line",
        yAxisIndex: 1,

        data: [0, 11.48, 18.0, 25.65],
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          color: "#ff3300",
        },
        smooth: true,
      },
    ],
  },
});

let { data, dataHeader, data2, dataHeader2, chart1Data, chart2Data } =
  toRefs(state);
</script>
<style lang="scss" scoped>
::v-deep .el-table td.el-table__cell div {
  height: 0.225rem;
  line-height: 0.225rem;
}

::v-deep .el-table th.el-table__cell {
  padding: 0.025rem 0 !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  border: none;
  color: #fff;
}

::v-deep .el-table .cell {
  height: 0.2875rem;
  line-height: 0.2625rem;
}

::v-deep .el-scrollbar__bar.is-vertical {
  display: none;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #2f4b5a !important;
}

::v-deep .el-table__inner-wrapper::before {
  display: none;
}

::v-deep .el-table tr,
.el-table td {
  background: transparent;
}

div {
  font-size: 0.4rem;
  color: #fff;
}

.title-global {
  background: url("@/assets/images/title.png") 0.875rem 0.0875rem/4.0625rem
    0.25rem no-repeat;
}

.title-img {
  color: #fff;
  font-size: 0.25rem;
  height: 0.375rem;
  width: 90%;
  line-height: 0.375rem;
  text-align: left;
  padding: 0 0 0.435rem 0.9375rem;
  border-bottom: 0.0125rem dotted #0089cd;
}

.title-img.active {
  text-align: center;
  padding: 0 0 0.435rem 0;
}

.content-wrap {
  width: 100%;
  height: 100%;
  // 最大最小宽/高 不能转rem
  min-width: 1396px;
  min-height: 638px;
  margin: 0 auto;
  padding: 0 0.125rem 0.125rem 0.125rem;
  background: radial-gradient(6.25rem 6.25rem at 50% 50%, #87d370, #0980a8);
  // 首次加载跳动动画
  animation: zoomInDown 0.7s;

  @keyframes zoomInDown {
    from {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -12.5rem, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -12.5rem, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 0.75rem, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 0.75rem, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }

  .earthBg {
    width: 99%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  header {
    width: 100%;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.6125rem;
    font-family: 楷体;
    color: #fff;
    text-align: center;
    background: url(@/assets/images/pic-2.png) 0.25rem center/100% 100%
      no-repeat;
  }

  .content-main {
    position: relative;
    height: calc(100% - 1.25rem);
    width: 100%;
    .rain {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      color: #f29701;
      z-index: 1;
    }
    .time {
      position: absolute;
      top: -0.7rem;
    }
  }

  .con {
    display: flex;
    width: 100%;
    height: 60%;
  }

  .left,
  .right {
    display: flex;
    flex: 2;
    flex-direction: column;
    overflow: hidden;
  }

  .left-one,
  .left-two {
    position: relative;
    flex: 1;
    // border: 0.0125rem solid #016f2d;
    z-index: 2;

    &::before {
      content: "";
      position: absolute;
      top: -0.0125rem;
      left: -0.0125rem;
      display: inline-block;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #7ed276;
      border-right: none;
      border-bottom: none;
    }

    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      bottom: -0.0125rem;
      right: -0.0125rem;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #7ed276;
      border-left: none;
      border-top: none;
    }
  }

  .left-two {
    margin: 0.125rem 0 0 0;

    .title-global {
      background: url("@/assets/images/title.png") 0.5rem 0.0875rem/4.8rem
        0.25rem no-repeat;
    }

    .title-img {
      height: 0.375rem;
      text-align: center;
    }
  }

  .after {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);

    &::before {
      content: "";
      position: absolute;
      right: -0.0125rem;
      top: -0.0125rem;
      display: inline-block;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #7ed276;
      border-left: none;
      border-bottom: none;
    }

    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      bottom: -0.0125rem;
      left: -0.0125rem;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #7ed276;
      border-right: none;
      border-top: none;
    }
  }

  .center {
    position: relative;
    flex: 3;
    // border: 0.025rem solid #01296f;
    margin: 0 0.125rem;
    display: flex;
    justify-content: center;
    align-items: center;
    // &::before {
    //   content: "";
    //   position: absolute;
    //   top: -0.0125rem;
    //   left: -0.0125rem;
    //   display: inline-block;
    //   width: 0.1875rem;
    //   height: 0.1875rem;
    //   border: 0.025rem solid #7ed276;
    //   border-right: none;
    //   border-bottom: none;
    // }
    // &::after {
    //   content: "";
    //   display: inline-block;
    //   position: absolute;
    //   bottom: -0.0125rem;
    //   right: -0.0125rem;
    //   width: 0.1875rem;
    //   height: 0.1875rem;
    //   border: 0.025rem solid #7ed276;
    //   border-left: none;
    //   border-top: none;
    // }
  }

  .right-two {
    margin: 0.125rem 0 0 0;
  }

  .right-one,
  .right-two {
    position: relative;
    flex: 1;
    // border: 0.0125rem solid #01296f;
    height: 2.75rem;

    .right-title {
      height: 0.375rem;
      line-height: 0.375rem;
      font-size: 0.25rem;
      color: #fff;
      background: #051a4a;
    }

    &::before {
      content: "";
      position: absolute;
      top: -0.0125rem;
      left: -0.0125rem;
      display: inline-block;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #7ed276;
      border-right: none;
      border-bottom: none;
    }

    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      bottom: -0.0125rem;
      right: -0.0125rem;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #7ed276;
      border-left: none;
      border-top: none;
    }
  }

  footer {
    display: flex;
    width: 100%;
    height: 39%;
    margin: 0.125rem 0;
  }

  .footer-left,
  .footer-right {
    position: relative;
    flex: 1;
    // border: 0.0125rem solid #01296f;

    &::before {
      content: "";
      display: inline-block;
      position: absolute;
      top: -0.0125rem;
      left: -0.0125rem;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #7ed276;
      border-right: none;
      border-bottom: none;
    }

    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      bottom: -0.0125rem;
      right: -0.0125rem;
      width: 0.1875rem;
      height: 0.1875rem;
      border: 0.025rem solid #7ed276;
      border-left: none;
      border-top: none;
    }
  }

  .footer-right {
    margin: 0 0 0 0.125rem;

    .title-global {
      background: url("@/assets/images/title.png") 0.6rem 0.0875rem/3.1875rem
        0.25rem no-repeat;
    }

    .title-img {
      height: 0.4375rem;
      padding: 0 0 0 0.72rem;
      margin-left: 0.6625rem;
    }
  }

  .footer-left {
    // padding: 0 0 0.125rem;

    .title-global {
      background: url("@/assets/images/title.png") 0.5rem 0.0875rem/4.75rem
        0.25rem no-repeat;
    }

    .title-img {
      height: 0.4375rem;
      padding: 0 0 0 0.9375rem;
    }
  }
}
</style>
